<template>
  <div class="learning-guide">
  <!-- 弹出框 -->
    <el-dialog title="请选择人群" :visible.sync="dialogTableVisible" width="650px">
      <div class="xui-grid-avg-3">
        <div class="xui-padding-xs"  v-if="item.name != '全部'" v-for="(item,index) in tagList" :key="`tag-${index}`">
          <a href="javascript:void(0);" class="xui-block" @click="changeCategory(item)">
            <img class="xui-block" :src="peopleImg[item.name]" alt="">
          </a>
        </div>
      </div>
    </el-dialog>
    <content-header :title="routeItem.title"></content-header>
    <div class="tab-header xui-margin-top-lg" style="padding:10px; background:#f9f9f9;">
      <span>类别:</span>
      <category-tabs
        :tabList="tagList"
        :tabIndex="Number(tagId)"
        @changeCategory="changeCategory"
      ></category-tabs>
    </div>
    <div class="xui-margin-top">
      <tab-bar @tab-click="clickTab" :btns="tabs"></tab-bar>
    </div>
    <div class="list-wrap xui-padding-bottom-lg">
      <div v-for="(item,index) in listData"  :key="index" >
        <img-text-list  :item="item" :href='`guide/detail/${item.nId}?curTab=${curTab}`'></img-text-list>
      </div>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      background
      v-if="page.count"
      layout="prev, pager, next"
      :total="page.count"
      class="xui-margin-top xui-text-center"
      :current-page.sync="page.index"
      @current-change="getList"
      :page-size="10">
    </el-pagination>
  </div>
</template>

<script>
import ContentHeader from "@/components/widge/content-header";
import CategoryTabs from "@/components/widge/category-tabs/tab-bar";
import tabBar from "@/components/widge/tabs/tab-bar";
import imgTextList from "@/components/list/img-text-list";
import { getTutorialList } from "@/api/list";
import imgBox from "@/components/widge/img-box";
import {
  getLearningTag,
  getLearningGuideList,
  getLearningGuideDetail,
  getLearningResourceList,
  getLearningResourceDetail,
  getPolicyList,
  getPolicyDetail
} from "@/api/learning-guide";
import peopleImg1 from "@/assets/images/learning/learning-guide-people-1.png";
import peopleImg2 from "@/assets/images/learning/learning-guide-people-2.png";
import peopleImg3 from "@/assets/images/learning/learning-guide-people-3.png";
import peopleImg4 from "@/assets/images/learning/learning-guide-people-4.png";
import peopleImg5 from "@/assets/images/learning/learning-guide-people-5.png";
import peopleImg6 from "@/assets/images/learning/learning-guide-people-6.png";
import peopleImg7 from "@/assets/images/learning/learning-guide-people-7.png";
import peopleImg8 from "@/assets/images/learning/learning-guide-people-8.png";
import peopleImg9 from "@/assets/images/learning/learning-guide-people-9.png";
export default {
  data() {
    return {
      page: {
        index: 1,
        count: 0
      },
      dialogTableVisible: true,
      tagId: "0",
      tagList: [
        {
          index: "0",
          name: "全部"
        }
      ],
      tabs: [
        {
          name: "0",
          text: "学习指南"
        },
        {
          name: "1",
          text: "学习资源"
        },
        {
          name: "2",
          text: "教育政策"
        }
      ],
      curTab: 0,
      listData: [],
      peopleImg: [
        peopleImg1,
        peopleImg2,
        peopleImg3,
        peopleImg4,
        peopleImg5,
        peopleImg6,
        peopleImg7,
        peopleImg8,
        peopleImg9
      ],
      peopleImg: {
        "0-3岁": peopleImg1,
        "3-6岁": peopleImg2,
        "6-12岁": peopleImg3,
        "12-18岁": peopleImg4,
        成年人: peopleImg5,
        教师: peopleImg6,
        家长: peopleImg7,
        老年人: peopleImg8,
        特殊人群: peopleImg9,
        残障人士: peopleImg9,
        残障人群: peopleImg9,
        亲子: peopleImg2,
        家庭: peopleImg7
      }
    };
  },
  components: {
    ContentHeader,
    CategoryTabs,
    tabBar,
    imgTextList,
    imgBox
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    }
  },
  methods: {
    changeCategory(item) {
      this.tagId = Number(item.index);
      this.dialogTableVisible = false;
    },
    clickTab(curTab) {
      this.curTab = curTab;
    },
    getTags() {
      getLearningTag().then(res => {
        res.data.forEach(item => {
          let i = {};
          i.name = item.menuName;
          i.index = item.id;
          this.tagList.push(i);
        });
      });
    },
    getResourceList() {
      let tag = this.tagId == 0 ? "" : this.tagId;
      getLearningResourceList(this.page.index, tag).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
      });
    },
    getGuideList() {
      let tag = this.tagId == 0 ? "" : this.tagId;
      getLearningGuideList(this.page.index, tag).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
      });
    },
    getPolicyList() {
      let tag = this.tagId == 0 ? "" : this.tagId;
      getPolicyList(this.page.index, tag).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
      });
    },
    getList() {
      switch (Number(this.curTab)) {
        case 0:
          this.getGuideList();
          break;
        case 1:
          this.getResourceList();
          break;
        case 2:
          this.getPolicyList();
      }
    }
  },
  mounted() {
    this.getTags();
    this.getList();
  },
  watch: {
    curTab: function() {
      this.page.index = 1;
      this.getList();
    },
    tagId: function() {
      this.page.index = 1;
      this.getList();
    }
  }
};
</script>

<style lang="less">
.tab-header .category-tabs {
  display: inline-block;
}
.learning-guide .el-dialog {
  .el-dialog__body {
    padding: 15px 20px !important;
    border-top: 1px solid #e5e5e5;
  }
}
</style>


